<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginFrom" :rules="rules" ref="login_forms">
          <!--   rules是一个对象,需要我们只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值 -->
          <h2>欢迎来到基于前端开发技术的的商品销售管理系统</h2>
          <el-form-item prop="username">
            <el-input
              v-model:model-value="loginFrom.username"
              required
              pattern=".{5,}"
              title="账号长度至少为5位"
            ></el-input>
          </el-form-item>
          <el-form-item type="password" prop="password">
            <el-input
              show-password
              v-model:model-value="loginFrom.password"
              required
              pattern=".{6,}"
              title="密码长度至少为6位"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="btn_Loading" class="login-btn" @click="changeLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup name="">
import { ElCol, ElRow, ElForm, ElNotification } from 'element-plus'
import { ref } from 'vue'
import useUserStore from '@/store/modules/useUser'
import router from '@/router'
import { getTime } from '@/utils/time.js'
import type { FormRules } from 'element-plus'
import { el } from 'element-plus/es/locale/index.mjs'
import { useRoute } from 'vue-router'
let useStore = useUserStore()
/* 美化,在我们点击按钮后出现加载 */
let btn_Loading = ref(false)
let loginFrom = <any>ref({ username: 'admin', password: '111111' })
// 自定义我们的表单项规则
/*
    rule: 检验规则对象,
    value: 表单元素文本内容,
    callback: 函数:如果符合条件callback放行通过
    不如何条件callback方法注入错误提示信息
*/
const valiUserName = (rule: any, value: any, callback: any) => {
  /* 也可以去使用正则表达式,加上test测试(value)的方法来判断是否为true */
  /* /^\d{5,10}$/.test(value) */
  if (value.length >= 5) {
    callback()
  } else {
    callback(new Error('账号长度至少位5位'))
  }
}
const valiPassWord = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback()
  } else {
    callback(new Error('账号长度至少位6位'))
  }
}
const rules = ref<FormRules>({
  /* 开启规则检查,错误后的提示,最小字符位,最大,触发方式在我们的表单进行变化的时候 */
  /* username: [{ required: true, message: '用户名少于5个字符', min: 5, max: 15, trigger: 'change' }]
    , password: [{ required: true, message: '密码少于6位', min: 6, max: 15, trigger: 'change' }] */
  // validator:方法->>>自定义规则
  username: [{ validator: valiUserName, trigger: 'change' }],
  password: [{ validator: valiPassWord, trigger: 'change' }]
})

const $router = router
const $route = useRoute()
const message = getTime()
const changeLogin = async () => {
  /*优化,让我们表单只有在符合规则的情况下,点击登录才会进行我们发送请求.... */
  /* 获取el-form组件 */
  let login_forms = ref()
  /*
    调用次方法 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise,验证都正确的情况下,返回正常的状态,否则反之
    以同步的方法来执行整个函数.....利用
    利用await是接受的Promise成功的结果,那么如果没有接受到下面的就不会执行.........
   */
  /* 无法找到表单检验的方法 */
  //   await login_forms.value.validate()

  btn_Loading.value = true
  /*  实现点击后获取我们的Token数据,以此来获得我们对应的用户界面....
            点击登录按钮后我们干什么?
            第一步通知仓库发登录请求
            请求成功->跳转到展示数据的地方
            请求失败->弹出登录失败信息

        成功后,我们获取token数据并且跳转后用户界面
        但是我们在组件中不知道怎么获取成功与否.
        但是我们的async方法是会返回一个Promise对象的
        对象中有三种状态可以读取,
        此时状态必然是Undefined,因为在我们的函数中并没有提出报错
        所以自然函数执行完毕后会跳转到成功的状态,但因为我们没有赋值,故而为Undefined
        在我们的pinia库中设置好两种情况的Promise状态后
        我们在组件中可以通过.then.catch来执行成功或错误后的挑战操作


    */ try {
    /*
        useStore.userLogin(loginFrom.value)是一个异步操作，但是没有使用await来等待它的完成。
        当这个函数被调用时，它会立即返回一个Promise对象，而不会等待异步操作完成。
        因此，即使密码输入不正确，代码仍然会继续执行，导致页面跳转。
        try...catch语句用于捕获代码块中的异常。当try块中的代码抛出异常时，控制流将立即转移到catch块，执行catch块中的代码。
        */
    await useStore.userLogin(loginFrom.value)
    // 成功的结构执行编程式导航
    const redirect: any = $route.query.redirect
    $router.push({ path: redirect || '/' })
    console.log('编程式导航', $route.query.redirect, redirect)

    ElNotification({
      // 登录成功信息
      type: 'success',
      message: `登录成功,${message}好`,
      title: '欢迎回来'
    })
    btn_Loading.value = false
  } catch (error) {
    // 错误则弹出报错窗口
    ElNotification({
      // 登录失败信息
      type: 'error',
      message: error.message
    })
    btn_Loading.value = false
  }
}
</script>

<style scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
}

.login_form {
  position: relative;
  width: 80%;
  top: 30vh;
  background: url('@/assets/images/login_form.png') no-repeat;
  background-size: cover;
  padding: 20px;

  h2 {
    color: white;
    font-size: 25px;
    margin: 20px 0px;
  }

  .login-btn {
    width: 100%;
  }
}
</style>
